<template>
    <div>
        <div class="P_management_add">
        <ul>
            <li><el-button type="success" plain @click="handleAddClick" class="P_management_add">增加</el-button></li>
            <li><el-button class="P_management_add" @click="fabu">上传</el-button></li>
            <li>      
            <el-input v-model="search" size="mini" placeholder="输入关键字搜索"/>
        </li>
        </ul>
        </div>
        

        <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="number" label="序号" width="60"></el-table-column>
                <el-table-column prop="state" label="状态"></el-table-column>
                <el-table-column prop="position" label="职位名称"></el-table-column>
                <el-table-column prop="Department" label="公司部门" width="100"></el-table-column>
                <el-table-column prop="adress" label="工作地点" width="100"></el-table-column>
                <el-table-column prop="city" label="发布城市"></el-table-column>
                <el-table-column prop="date_issue" label="发布日期" width='100'></el-table-column>
                <el-table-column prop="date_refresh" label="刷新日期" width='100' ></el-table-column>
                <el-table-column prop="date_end" label="结束日期" width='100'></el-table-column>
                <el-table-column prop="sort" label="排序"></el-table-column>
            <el-table-column label="操作" width="180">
                <template slot-scope="scope">
                    <el-button type="primary" @click="handleEditClick(scope.$index,scope.row)"  size="mini">编辑</el-button>
                    <el-button type="danger" size="mini" @click="handleDelClick(scope.$index,scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog title="修改用户" :visible.sync="editBox" width="50%" :before-close="handleClose">
            <el-form ref="form" label-width="100px" v-model="user">
            
                <el-form-item label="状态:">
                    <el-input placeholder="请输入状态" maxlength="50" v-model = "user.state" ></el-input>
                </el-form-item>
                <el-form-item label="职位名称:">
                    <el-input placeholder="请输入职位名称" maxlength="50" v-model = "user.position" ></el-input>
                </el-form-item>
                <el-form-item label="公司部门:">
                    <el-input placeholder="请输入公司部门" maxlength="50" v-model = "user.Department"></el-input>
                </el-form-item>
                <el-form-item label="工作地点:">
                    <el-input placeholder="请输入工作地点" maxlength="50" v-model = "user.adress" ></el-input>
                </el-form-item>
                <el-form-item label="发布城市:">
                    <el-input placeholder="请输入发布城市" maxlength="50" v-model = "user.city" ></el-input>
                </el-form-item>
                <el-form-item label="发布日期:">
                    <el-input placeholder="请输入发布日期" maxlength="50" v-model = "user.date_issue"></el-input>
                </el-form-item>
                <el-form-item label="刷新日期:">
                    <el-input placeholder="请输入刷新日期" maxlength="50" v-model = "user.date_refresh" ></el-input>
                </el-form-item>
                <el-form-item label="结束日期:">
                    <el-input placeholder="请输入结束日期" maxlength="50" v-model = "user.date_end" ></el-input>
                </el-form-item>
                <el-form-item label="排序:">
                    <el-input placeholder="请输入排序" maxlength="50" v-model = "user.sort"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="handleEditUser">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="添加用户" :visible.sync="addBox" width="50%" :before-close="handleClose">
            <el-form ref="form" label-width="100px" v-model="addUserData">
                <el-form-item label="序号:">
                    <el-input placeholder="请输入序号" maxlength="50" v-model = "addUserData.number" ></el-input>
                </el-form-item>
                <el-form-item label="状态:">
                    <el-input placeholder="请输入状态" maxlength="50" v-model = "addUserData.state" ></el-input>
                </el-form-item>
                <el-form-item label="职位名称:">
                    <el-input placeholder="请输入职位名称" maxlength="50" v-model = "addUserData.position" ></el-input>
                </el-form-item>
                <el-form-item label="公司部门:">
                    <el-input placeholder="请输入公司部门" maxlength="50" v-model = "addUserData.Department"></el-input>
                </el-form-item>
                <el-form-item label="工作地点:">
                    <el-input placeholder="请输入工作地点" maxlength="50" v-model = "addUserData.adress" ></el-input>
                </el-form-item>
                <el-form-item label="发布城市:">
                    <el-input placeholder="请输入发布城市" maxlength="50" v-model = "addUserData.city" ></el-input>
                </el-form-item>
                <el-form-item label="发布日期:">
                    <el-input placeholder="请输入发布日期" maxlength="50" v-model = "addUserData.date_issue"></el-input>
                </el-form-item>
                <el-form-item label="刷新日期:">
                    <el-input placeholder="请输入刷新日期" maxlength="50" v-model = "addUserData.date_refresh" ></el-input>
                </el-form-item>
                <el-form-item label="结束日期:">
                    <el-input placeholder="请输入结束日期" maxlength="50" v-model = "addUserData.date_end" ></el-input>
                </el-form-item>
                <el-form-item label="排序:">
                    <el-input placeholder="请输入排序" maxlength="50" v-model = "addUserData.sort"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="handleAddUser">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        name: "P_management",
        data() {
            return {
                tableData: [{
                    number: '1',
                    state: '已发布',
                    position: ' 程序员',
                    Department:'策划部',
                    adress:'河南郑州',
                    city:'郑州',
                    date_issue:'2012-12-12',
                    date_refresh:'2013-1-2',
                    date_end:'2013-3-3',
                    sort:'1',

                }, {
                    number: '2',
                    state: '未发布',
                    position: ' 程序员',
                    Department:'策划部',
                    adress:'河南郑州',
                    city:'郑州',
                    date_issue:'2012-12-12',
                    date_refresh:'2013-1-2',
                    date_end:'2013-3-3',
                    sort:'2',
                }, {
                    number: '3',
                    state: '未发布',
                    position: ' 程序员',
                    Department:'策划部',
                    adress:'河南郑州',
                    city:'郑州',
                    date_issue:'2012-12-12',
                    date_refresh:'2013-1-2',
                    date_end:'2013-3-3',
                    sort:'3',
                }, {
                    number: '4',
                    state: '未发布',
                    position: ' 程序员',
                    Department:'策划部',
                    adress:'河南郑州',
                    city:'郑州',
                    date_issue:'2012-12-12',
                    date_refresh:'2013-1-2',
                    date_end:'2013-3-3',
                    sort:'4',
                }],
                addBox : false,
                editBox:false,
                user:{},
                editIndex:"",
                addUserData:{
                    number: '',
                    state: '',
                    position: '',
                    Department:'',
                    adress:'',
                    city:'',
                    date_issue:'',
                    date_refresh:'',
                    date_end:'',
                    sort:'',
                },
            }
        },
        methods:{
            handleEditClick(index,row){
                this.editBox = true
                this.user = row
                this.editIndex = index
            },

            // eslint-disable-next-line no-unused-vars
            handleDelClick(index,row){
                this.$confirm('此操作将删除该用户, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.tableData.splice(index,1)
                    this.$message({showClose: true, message: "删除成功", type: 'success'});
                })
            },
            handleClose(done) {
                done();
            },
            handleEditUser(){
                this.tableData.splice(this.editIndex,1,this.user)
                this.$message({showClose: true, message: "修改成功", type: 'success'});
                this.editBox = false
            },
            handleAddClick(){
                this.addBox = true
            },
            handleAddUser(){
                // let strDate = dateFormat("YYYY-mm-dd",this.addUserData.date)
                // this.addUserData.date = strDate
                this.tableData.push(this.addUserData)
                this.addBox = false
                this.addUserData = {}
                this.$message({showClose: true, message: "添加成功", type: 'success'});
            },
            fabu(){
                alert('上传成功')
            },
        },
    }
   


</script>

<style scoped>
.P_management_add{
    margin: 0 auto;
}
.P_management_add ul>li{
    list-style-type: none;
    float: left;
    margin: 20px ;
}
</style>